import React from './react';
import ReactDOM from './react-dom';


/**
 * 函数组件其实是一个函数，接收props, 返回一个React元素
 */
// function FunctionComponent(props) {
//   // return <h1>hello, {props.name}</h1>;
//   return React.createElement('h1', null, 'hello', props.name)
// }

/**
 * 组件分为内置组件和自定义组件
 * 内置组件p h1 span type 字符串
 * 自定义组件 类型是一个函数，类组件的父类Component的原型上有一个属性isReactComponent = {}
 * 自定义组件的名称必须是大写字母开头
 * 自定义组件的返回值有且只有一个根结点
 */

// DISABLE_NEW_JSX_TRANSFORM = true 禁用掉新的jsxdev转换，使用React.createElement
// class ClassComponent extends React.Component {
//   render() {
//     return <h1 className='title'>hello, {this.props.name}</h1>;
//     // return React.createElement('h1', null, 'hello', this.props.name)
//   }
// }

// class Sun extends React.Component {
//   numberA
//   numberB
//   result
//   constructor(props) {
//     super(props)
//     this.numberA = React.createRef();
//     this.numberB = React.createRef();
//     this.result = React.createRef();
//   }
//   handleClick = (event) => {
//     let numberA = this.numberA.current.value;
//     let numberB = this.numberB.current.value;
//     this.result.current.value = parseFloat(numberA) + parseFloat(numberB)
//   }
//   render() {
//     return (
//       <>
//         <input ref={this.numberA} />
//         <input ref={this.numberB} />
//         <button onClick={this.handleClick}>+</button>
//         <input ref={this.result} />
//       </>
//     )
//   }
// }
// class TextInput extends React.Component {
//   constructor(props) {  
//     super(props);
//     this.inputRef = React.createRef();
//   }
//   getFocus = () => {
//     this.inputRef.current.focus();
//   }
//   render() {
//     return <input ref={this.inputRef} />
//   }

// }
function TextInput(props, ref) {
  return <input ref={ref} />
}
const ForwardRefInput = React.forwardRef(TextInput)
class Form extends React.Component {
  constructor(props) {
    super(props)
    this.textInputRef = React.createRef()
  }
  getFocus = () => {
    this.textInputRef.current.focus()
  }
  render() {
    return <>
      <ForwardRefInput ref={this.textInputRef} />
      <button onClick={this.getFocus}>获取焦点</button>
    </>
  }
}


let element = React.createElement(Form, { name: 'zhufeng' })
// let element = React.createElement(FunctionComponent, { name: 'zhufeng' })

/**
 *  setState 有时候会是异步的（本质上是同步批量执行，）
 * 出于性能考虑react会把多个setState合并成一个调用
 */





ReactDOM.render(
  element,
  document.getElementById('root')
);
